<template>
    <div id="weather" class="weather">
        <div class="search__area">
            <input v-model="city" class="search" type="text" />
            <i class="iconfont icon-search" @click="btnSearch"></i>
        </div>
        <div class="weather__area" v-if="!!weather">
            <div class="today">
                <div>{{weather.city}}</div>
                <div>{{weather.forecast[0].type}}</div>
                <div>{{weather.forecast[0].high}}~{{weather.forecast[0].low}}</div>
            </div>
            <md-content class="md-scrollbar">
                <weather-item :weather="weather.yesterday" :day="'昨天'"></weather-item>
                <weather-item :key="i" v-for="(item,i) in weather.forecast" :weather="item" :day="i==0?'今天':''"></weather-item>
            </md-content>
        </div>
    </div>
</template>
<script>
import { mapActions, mapState } from "vuex";
import WeatherItem from "@/components/WeatherItem";
export default {
  name: "weather",
  components: {
    WeatherItem
  },
  data() {
    return {
      city: ""
    };
  },
  mounted() {
    this.getWeather({ city: "广州" });
  },
  computed: {
    ...mapState({
      weather: state => state.weather
    })
  },
  methods: {
    ...mapActions({
      getWeather: "GET_WEATHER",
      getWeatherType: "GET_WEATHERTYPE"
    }),
    btnSearch: function() {
      this.getWeather({ city: this.city });
    }
  }
};
</script>
<style lang="less" scoped>
@import "../styles/var";
.weather {
  background: #84a0b8;
  padding: 8px;
  .search__area {
    height: 45px;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    .search {
      height: 30px;
      background: none;
      border-radius: 5px;
      color: @weatherColor;
      padding-left: 20px;
      padding-right: 50px;
      width: 80%;
    }
    .iconfont {
      font-size: @largeSize;
      color: @weatherColor;
    }
  }
  .weather__area {
    .today {
      display: flex;
      display: -webkit-flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      color: @weatherColor;
      & > div:nth-child(1) {
        font-size: @largeSize;
      }
      & > div:nth-child(2) {
        font-size: @mediumSize;
      }
      & > div:nth-child(3) {
        font-size: @largeSize;
      }
    }
  }
}
@media screen and (max-width: 414px) {
  .md-scrollbar {
    max-height: 564px;
    overflow: auto;
  }
  .weather {
    max-height: 576px;
    height: 576px;
    overflow: auto;
  }
}
@media screen and (max-width: 375px) {
  .md-scrollbar {
    max-height: 494px;
    overflow: auto;
  }
  .weather {
    max-height: 506px;
    height: 506px;
    overflow: auto;
  }
}
@media screen and (max-width: 320px) {
  .md-scrollbar {
    max-height: 395px;
    overflow: auto;
  }
  .weather {
    max-height: 406px;
    height: 406px;
    overflow: auto;
  }
}
</style>